import { VxeGridPropTypes } from "vxe-table/types/grid";
import XEUtils from 'xe-utils';
import { BillItem } from "/@/api/wms/wms-model";

export const df = 'YYYY-MM-DD HH:mm:ss'
// export const df = 'YYYY-MM-DD'

export const columns: VxeGridPropTypes.Columns = [
  {type: 'checkbox', width: 60, fixed: 'left',},
  {type: 'seq', title: '序号', treeNode: false, width: 50,},
  {field: 'code', title: '移库单号', sortable: false, visible: true, minWidth: 160,},
  // {field: 'orderCode', title: '订单号', sortable: false, visible: true, minWidth: 130,},
  // {field: 'goodsList.name', title: '商品', sortable: false, visible: true, width: 120,
  // formatter: ({row,}) => {
  //   if (row.goodsList) {
  //     return row.goodsList.map(e => e.goods.name).toString()
  //   }
  //   return '';
  // }},
  // {field: 'count', title: '货物计数', sortable: false, visible: true, width: 80,
  // formatter: ({row,}) => {
  //   return row?.goodsList?.length
  // }},
  {field: 'qty', title: '总数量', sortable: false, visible: true, width: 100,
  formatter: ({row,}) => {
    if (row.goodsList) {
      const qty = row.goodsList.reduce((pre, cur,) => pre + cur.qty, 0)
      return XEUtils.commafy(qty, { digits: 1, });
    }
    return 0;
  }},
  {field: 'creator.name', title: '创建人', sortable: false, visible: true, width: 100,},
  {field: 'editor.name', title: '修改人', sortable: false, visible: false, width: 100,},
  {field: 'memo', title: '备注', visible: true, sortable: false, minWidth: 90,},
  // {field: 'workAt', title: '业务日期', sortable: true, visible: false, width: 160,},
  {field: 'CreatedAt', title: '移库时间', visible: true, sortable: true, width: 160,
  formatter ({ cellValue }) {
    return XEUtils.toDateString(cellValue,)
  }},
  {field: 'UpdatedAt', title: '更新时间', visible: false, sortable: false, width: 160,
  formatter ({ cellValue }) {
    return XEUtils.toDateString(cellValue,)
  }},
];

export const goodsListColumns: VxeGridPropTypes.Columns = [
  // {title: '操作', sortable: false, visible: true, slots: {default: 'operate', header: ({column,}) => {
  //   console.log(column)
  //   return (<vxe-button icon="vxe-icon-close" round></vxe-button>)
  // },}, 
  //       width: 45, align: 'center', fixed: 'left',},
  { field: 'seq', type: 'seq', title: '序号', align: 'center', width: 50,},
  { field: 'name', title: '货物', minWidth: 140, sortable: false,},
  { field: 'code', title: '货物编号', minWidth: 120, sortable: false,},
  { field: 'cate.name', title: '货物类别', minWidth: 90, sortable: false,},
  { field: 'unit', title: '单位', width: 55, visible: true, sortable: false,},
  { field: 'barcode', title: '条码', minWidth: 120, visible: false, sortable: false,},
  { field: 'qty', title: '数量', minWidth: 150, visible: true, sortable: false, align: 'left',
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: true,}, 
    slots: { edit: 'qty_edit', default: 'qty_edit_default', },
  },
  { field: 'srcWid', title: '来源 仓库/库区', minWidth: 160, visible: true, sortable: false, align: 'left', 
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: false,}, 
    slots: { edit: 'srcWid_edit',default: 'srcWid_default'},
  },
  { field: 'destWid', title: '目标 仓库/库区', minWidth: 160, visible: true, sortable: false, align: 'left', 
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: false,}, 
    slots: { edit: 'destWid_edit', default: 'destWid_default',},
  },
  { field: 'memo', title: '备注', minWidth: 120, visible: true, sortable: false,
  editRender: {autofocus: '.vxe-input--inner', autoselect: true,}, 
  slots: { edit: 'memo_edit' },},
]

// print
export const printColumns: VxeGridPropTypes.Columns = [
  { field: 'goods.name', title: '货物', minWidth: 150, sortable: false,},
  { field: 'goods.code', title: '货物编号', minWidth: 120, sortable: false,},
  { field: 'goods.cate.name', title: '类别', minWidth: 120, sortable: false,},
  { field: 'goods.unit', title: '单位', width: 55, visible: true, sortable: false,},
  // { field: 'barcode', title: '条码', minWidth: 150, visible: false, sortable: false,},
  { field: 'warehouse.name', title: '收货仓库/库区', minWidth: 150, visible: true, sortable: false, align: 'left',},
  { field: 'qty', title: '入库数量', width: 80, visible: true, sortable: false, align: 'left',},
  // { field: 'price', title: '单价', minWidth: 100, visible: true, sortable: false, align: 'left',},
  // { field: 'amount', title: '金额', minWidth: 120, visible: true, sortable: true, align: 'left', formatter: 'amount',},
  // { field: 'isGift', title: '赠品', width: 60, align: 'left', visible: true, slots: { default: 'isGift_edit',},},
  // { field: 'memo', title: '备注', minWidth: 120, visible: true, sortable: false,}
]
export const printStyle = `
.title {
  text-align: center;
}
.my-list-row {
  display: inline-block;
  width: 100%;
}
.my-list-col {
  float: left;
  width: 33.33%;
  height: 28px;
  line-height: 28px;
}
.my-top,
.my-bottom {
  font-size: .9rem;
}
.my-top {
  margin-bottom: 5px;
}
.my-bottom {
  margin-top: 5px;
  text-align: right;
}
.my-bottom .my-list-col { display:flex;justify-content: space-between;width:50%; }
`

export function wrap(row:BillItem) {
  const topHtml = `
  <h2 class="title">收货单</h2>
  <div class="my-top">
    <div class="my-list-row">
      <div class="my-list-col">收货单号：${row.code}</div>
      <div class="my-list-col">收货日期：${XEUtils.toDateString(row.CreatedAt)}</div>
    </div>
    <div class="my-list-row">
      <div class="my-list-col">供应商：${row.supplier.name}</div>
      <div class="my-list-col">订单号：${row.orderCode}</div>
    </div>
  </div>
  `
  const bottomHtml = `
<div class="my-bottom">
  <div class="my-list-row">
    <div class="my-list-col">备注：${row.memo}</div>
    <div class="my-list-col">收货人：${row.creator.name}</div>
  </div>
</div>
`
  return {
    topHtml,
    bottomHtml,
  }
}

